import React from "react";

import { Form, Input, Select, Button, Row, Col, Badge, Cascader } from "antd";
const FormItem = Form.Item;
const { Option } = Select;
const TopForm = ({
  form: { getFieldDecorator, getFieldsValue },
  onSearch,
  onClick4,
  advanced,
  options,
  resetForm,
  warehouse,
  workShopList,
}) => {
  const advancedss = () => {
    if (onClick4) {
      onClick4();
    }
  };
  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  return (
    <div>
      <Form>
        <Row gutter={24}>
          <Col span={5}>
            <FormItem label="批号" {...formItemLayout}>
              {getFieldDecorator("batchNo", {
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "");
                },
              })(
                <Input
                  placeholder="请输入"
                  allowClear
                  onPressEnter={() => onSearch(getFieldsValue())}
                ></Input>
              )}
            </FormItem>
          </Col>
          <Col span={5}>
            <FormItem label="领料单号" {...formItemLayout}>
              {getFieldDecorator("acceptCode", {
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "");
                },
              })(
                <Input
                  placeholder="请输入领料单号"
                  allowClear
                  onPressEnter={() => onSearch(getFieldsValue())}
                ></Input>
              )}
            </FormItem>
          </Col>
          <Col span={5}>
            <FormItem label="发料仓库" {...formItemLayout}>
              {getFieldDecorator("storeName", {
                initialValue: localStorage.getItem("department"),
              })(
                <Select allowClear={true} placeholder="请选择发料仓库">
                  {warehouse.map((value, index) => {
                    return (
                      <Option value={value.name} key={value.id}>
                        {value.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={4} style={{ display: "flex" }} className="serarch-btns">
            <FormItem>
              <Button
                type="primary"
                icon="search"
                onClick={() => onSearch(getFieldsValue())}
              >
                {"查询"}
              </Button>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                icon={advanced ? "up" : "down"}
                onClick={() => advancedss()}
              >
                {" 展开"}
              </Button>
            </FormItem>
            <FormItem>
              <Button
                type="default"
                onClick={() => {
                  resetForm();
                }}
                icon={"redo"}
              >
                {"重置"}
              </Button>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          {advanced ? (
            <Col span={5}>
              <FormItem label="机型" {...formItemLayout}>
                {getFieldDecorator("model", {
                  getValueFromEvent: (event) => {
                    return event.target.value.replace(/\s+/g, "");
                  },
                })(
                  <Input
                    placeholder="请输入机型"
                    allowClear
                    onPressEnter={() => onSearch(getFieldsValue())}
                  ></Input>
                )}
              </FormItem>
            </Col>
          ) : (
            ""
          )}
          {advanced ? (
            <Col span={5}>
              <FormItem label="回写状态" {...formItemLayout}>
                {getFieldDecorator("status", {
                  // initialValue: '1'
                })(
                  <Select allowClear={true} placeholder="请选择回写状态">
                    <Option value="未通过">未通过</Option>
                    <Option value="已通过">已通过</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
          ) : null}
          {advanced ? (
            <Col span={5}>
              <FormItem label="领料车间" {...formItemLayout}>
                {getFieldDecorator(
                  "departName",
                  {}
                )(
                  <Select allowClear={true} placeholder="请选择领料车间">
                    {workShopList &&
                      workShopList.map((item) => (
                        <Option key={item.name} value={item.name}>
                          {item.name}
                        </Option>
                      ))}
                  </Select>
                )}
              </FormItem>
            </Col>
          ) : (
            ""
          )}
        </Row>
      </Form>
    </div>
  );
};
export default Form.create()(TopForm);
